<template>
  <view class="container">
    <!-- 清空记录确认弹窗 -->
    <view class="modal" v-if="showClearModal">
      <view class="modal-content">
        <view class="modal-title">确认清空</view>
        <view class="modal-text">确定要清空所有记录吗？此操作不可恢复！</view>
        <view class="modal-buttons">
          <button class="modal-button cancel" @tap="showClearModal = false">取消</button>
          <button class="modal-button confirm" @tap="clearAllRecords">确认清空</button>
        </view>
      </view>
    </view>
    
    <!-- 反馈与建议弹窗 -->
    <view class="modal" v-if="showFeedbackModal">
      <view class="modal-content feedback-modal">
        <view class="modal-title">反馈与建议</view>
        <view class="feedback-form">
          <textarea class="feedback-input" v-model="feedbackContent" placeholder="请输入您的反馈或建议..." maxlength="500"></textarea>
          <view class="feedback-contact">
            <input class="contact-input" v-model="contactInfo" placeholder="联系方式（选填）" />
          </view>
        </view>
        <view class="modal-buttons">
          <button class="modal-button cancel" @tap="showFeedbackModal = false">取消</button>
          <button class="modal-button confirm" @tap="submitFeedback">提交</button>
        </view>
      </view>
    </view>

    <view class="others">
      <view class="item">
        <image class="icon" src="/static/user_share.png"></image>
        <button class="content share" open-type="share">
          <view>分享好友</view>
          <image class="right" src="/static/right_h.png"></image>
        </button>
      </view>
      <view class="item">
        <image class="icon" src="/static/clear_icon.png"></image>
        <view class="content" @tap="showClearConfirm">
          <view>清空记录</view>
          <image class="right" src="/static/right_h.png"></image>
        </view>
      </view>
      <view class="item">
        <image class="icon" src="/static/feedback_icon.png"></image>
        <view class="content" @tap="showFeedbackDialog">
          <view>反馈与建议</view>
          <image class="right" src="/static/right_h.png"></image>
        </view>
      </view>
    </view>
    <view class="version">
      v1.0
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: '',
      showClearModal: false,
      showFeedbackModal: false,
      feedbackContent: '',
      contactInfo: '',
      otherMiniPrograms: [
        {
          icon: '../../static/waimai.png',
          name: '购物领券',
          appId: 'wx5beb3dc0c3575180',
          path: '/pages/index/index'
        }
      ]
    }
  },
  onLoad() {
    this.userInfo = getApp().globalData.userInfo
  },
  onShareAppMessage(res) {
    // 提供默认的分享配置，而不是调用不存在的 shareConfig 方法
    return {
      title: '安记录丨工具舱',
      path: '/pages/record/index',
      imageUrl: '/static/share-img.png'
    }
  },
  methods: {
    /*登录 */
    onGotUserInfo(e) {
      this.userInfo = e.detail.userInfo
      uni.setStorageSync('userInfo', e.detail.userInfo)
    },
    goToImage: function (imagePath) {
      uni.previewImage({
        urls: [imagePath],
        longPressActions: {
          itemList: ['发送给朋友', '保存图片', '收藏'],
          success: function (data) {
            console.log(
              '选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片'
            )
          },
          fail: function (err) {
            console.log(err.errMsg)
          }
        }
      })
    },
    toOtherMiniPrograms: function (e) {
      const index = e.currentTarget.dataset.index
      uni.navigateToMiniProgram({
        appId: this.otherMiniPrograms[index].appId,
        path: this.otherMiniPrograms[index].path
      })
    },
    onSubscribe: function () {
      getApp().onSubscribe()
    },
    
    // 显示清空记录确认弹窗
    showClearConfirm: function() {
      this.showClearModal = true
    },
    
    // 清空所有记录
    clearAllRecords: function() {
      // 清空本地存储中的记录
      uni.removeStorageSync('drinkHistory')
      uni.removeStorageSync('poopHistory')
      uni.removeStorageSync('lucky_today_data')
      uni.removeStorageSync('refresh_count_data')
      
      // 关闭弹窗并显示成功提示
      this.showClearModal = false
      uni.showToast({
        title: '记录已清空',
        icon: 'success',
        duration: 2000
      })
    },
    
    // 显示反馈与建议弹窗
    showFeedbackDialog: function() {
      this.showFeedbackModal = true
    },
    
    // 提交反馈与建议
    submitFeedback: function() {
      if (!this.feedbackContent.trim()) {
        uni.showToast({
          title: '请输入反馈内容',
          icon: 'none',
          duration: 2000
        })
        return
      }
      
      // 保存反馈到本地存储（后续可改为接口调用）
      const feedback = {
        content: this.feedbackContent,
        contact: this.contactInfo,
        timestamp: new Date().getTime()
      }
      
      // 获取现有反馈
      const feedbackList = uni.getStorageSync('feedbackList') || []
      feedbackList.push(feedback)
      uni.setStorageSync('feedbackList', feedbackList)
      
      // 关闭弹窗并清空输入
      this.showFeedbackModal = false
      this.feedbackContent = ''
      this.contactInfo = ''
      
      // 显示成功提示
      uni.showToast({
        title: '感谢您的反馈',
        icon: 'success',
        duration: 2000
      })
    }
  }
}
</script>

<style lang="scss">
// 统一主色与风格变量（清新悦目蓝色主题）
$main-gradient: linear-gradient(90deg, #4f8cff 0%, #6fd6ff 100%);
$main-color: #4f8cff;
$main-color2: #6fd6ff;
$card-bg: rgba(255, 255, 255, 0.98);
$border-radius: 24rpx;
$shadow: 0 4rpx 24rpx 0 rgba(79, 140, 255, 0.08);
$divider: 1px dashed #e0e0e0;

page {
  background: #f6f8fa;
}
.container {
  padding-bottom: 32rpx;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  min-height: 100vh;
}
.head {
  background: $main-gradient;
  padding: 48upx 40upx 48upx 40upx;
  margin-bottom: 36upx;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: $border-radius;
  box-shadow: $shadow;
  border: none;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.head::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: $main-gradient;
  opacity: 0.12;
  pointer-events: none;
}
.head-picture {
  width: 110upx;
  height: 110upx;
  background: #fff;
  border: 6upx solid #e0e6ed;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 16rpx 0 rgba(79, 140, 255, 0.1);
  position: relative;
}
.head-picture::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  border: 2upx dashed #b6d6ff;
  pointer-events: none;
}
.nickname {
  margin-left: 36upx;
  font-size: 40upx;
  font-weight: 600;
  text-align: left;
  color: #fff;
  letter-spacing: 2rpx;
  text-shadow: 0 2rpx 8rpx #4f8cff44;
}
.others {
  margin: 28rpx 0;
  background: $card-bg;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx 0 rgba(79, 140, 255, 0.04);
  border: none;
  padding: 0 0 8rpx 0;
}
.others .item {
  display: flex;
  align-items: center;
  width: 690rpx;
  padding: 0 32rpx;
  border-bottom: $divider;
  position: relative;
  min-height: 96rpx;
  transition: background 0.2s;
}
.others .item:last-child {
  border-bottom: none;
}
.others .item .icon {
  width: 54rpx;
  height: 54rpx;
  margin-right: 32rpx;
  filter: grayscale(0.7) contrast(1.1);
  border-radius: 12rpx;
  background: #f6f8fa;
  border: 1rpx solid #e0e6ed;
}
.others .item .content {
  width: 620rpx;
  padding: 32rpx 0;
  display: flex;
  align-items: center;
  font-size: 34rpx;
  color: #1a2a3a;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  background: none;
  border: none;
  text-align: left;
  line-height: normal;
  letter-spacing: 2rpx;
  font-weight: 500;
}
.others .item .content.share::after {
  border: none;
}
.others .item .content .right {
  width: 28rpx;
  height: 28rpx;
  margin-left: auto;
  filter: grayscale(0.7);
}
.version {
  position: fixed;
  bottom: 20rpx;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 28rpx;
  color: #b0bec5;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  letter-spacing: 2rpx;
}
// 数字高亮样式（如首页今日记录等可全局复用）
.highlight-number {
  color: $main-color2;
  font-weight: bold;
  font-size: 40rpx;
  letter-spacing: 1rpx;
}

// 弹窗样式
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-content {
  width: 80%;
  background-color: #fff;
  border-radius: $border-radius;
  padding: 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1a2a3a;
  margin-bottom: 24rpx;
  text-align: center;
}

.modal-text {
  font-size: 32rpx;
  color: #455a64;
  margin-bottom: 40rpx;
  text-align: center;
  line-height: 1.5;
}

.modal-buttons {
  display: flex;
  justify-content: space-between;
}

.modal-button {
  flex: 1;
  padding: 20rpx 0;
  font-size: 32rpx;
  border-radius: 12rpx;
  margin: 0 16rpx;
  border: none;
}

.modal-button.cancel {
  background-color: #f5f5f5;
  color: #455a64;
}

.modal-button.confirm {
  background: $main-gradient;
  color: #fff;
}

// 反馈表单样式
.feedback-modal {
  width: 85%;
}

.feedback-form {
  margin-bottom: 32rpx;
}

.feedback-input {
  width: 100%;
  height: 240rpx;
  background-color: #f6f8fa;
  border-radius: 12rpx;
  padding: 24rpx;
  font-size: 30rpx;
  color: #455a64;
  margin-bottom: 24rpx;
  box-sizing: border-box;
  border: 1px solid #e0e6ed;
}

.feedback-contact {
  margin-top: 16rpx;
}

.contact-input {
  width: 100%;
  height: 80rpx;
  background-color: #f6f8fa;
  border-radius: 12rpx;
  padding: 0 24rpx;
  font-size: 30rpx;
  color: #455a64;
  box-sizing: border-box;
  border: 1px solid #e0e6ed;
}
</style>
